// 引用math
@use 'sass:math';

// 实现1px边框
// 用法：
// @include retina-border(1,1,1,1);
// 数值 代表 各 边框的宽度  上右下左
@mixin _border-scale($dpr) {
    width: 100% * $dpr;
    height: 100% * $dpr;

    -webkit-transform: scale(math.div(1, $dpr));
    -webkit-transform-origin: 0 0;
    transform: scale(math.div(1, $dpr));
    transform-origin: 0 0;
}

@mixin _border-base() {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

@mixin retina-border($top: 0, $right: 0, $bottom: 0, $left: 0, $cor: #dfe1e6) {
    position: relative;

    &::before {
        border-top: #{$top}px solid $cor;
        border-right: #{$right}px solid $cor;
        border-bottom: #{$bottom}px solid $cor;
        border-left: #{$left}px solid $cor;

        @include _border-base();

        @media screen and (-webkit-min-device-pixel-ratio: 1) {
            @include _border-scale(1);
        }

        @media screen and (-webkit-min-device-pixel-ratio: 1.5) {
            @include _border-scale(1.5);
        }

        @media screen and (-webkit-min-device-pixel-ratio: 2) {
            @include _border-scale(2);
        }

        @media screen and (-webkit-min-device-pixel-ratio: 3) {
            @include _border-scale(3);
        }
    }
}